<template>
  <el-card class="dashboard">
    <el-row type="flex" justify="center" style="flex-wrap: wrap">
      <el-col
        :span="10"
        v-for="(dimension, index) in dimensionList"
        :key="index"
      >
        <div class="item process" v-if="dimension.name === '任务进度'">
          <i class="el-icon-s-data" style="color: #34bfa3"></i>
          <span class="name">{{ dimension.name }}</span>

          <el-progress
            type="dashboard"
            :width="50"
            :percentage="dimension.value"
          />
        </div>
        <div v-else class="item">
          <i
            v-if="dimension.name"
            :class="`el-icon-s-${ICONS[index]}`"
            :style="{ color: COLORS[index] }"
          ></i>
          <span class="name">{{ dimension.name }}</span>
          <span class="value">{{ dimension.value }}</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "StaticsTaskDashBoard",
  props: {
    dimension: {
      type: Object,
    },
  },
  watch: {
    dimension: {
      handler(value) {
        const list = this.dimensionObjToArray(value);
        this.dimensionList = list;
      },
      immediate: true,
    },
  },
  data() {
    return {
      dimensionList: [],
      COLORS: ["#40c9c6", "#36a3f7", "#f4516c", '#b6a2de', '#ea7d7d'],
      ICONS: ["custom", "promotion", "flag", 'opportunity', 'shop', 'cooperation'],
    };
  },
  methods: {
    dimensionObjToArray(data) {
      return Object.keys(data).map((key) => {
        return { name: key, value: data[key] };
      });
    },
  },
};
</script>

<style lang="scss">
.dashboard {
  margin-bottom: 20px;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    .name {
      display: inline-block;
      margin-right: 14px;
      color: #99a9bf;
      width: 90px;
      text-align: right;
    }
    .value {
      width: 50px;
    }
    i {
      font-size: 30px;
      color: #36a3f7;
    }
  }
  .process {
    display: flex;
    align-items: center;
  }
}
</style>